<template>
  <div class="modify-pwd-suc-us-container">

    <hurdle :showLine="0"></hurdle>

    <banner bannerText="修改密码" bannerEn="CHANGE PASSWORD"></banner>

    <div class="modify-pwd-suc-box">

      <div class="modify-pwd-suc-con">

        <img src="../../images/success.png" class="suc-pic"/>
        <span class="suc-text">密码修改成功</span>
        <button class="suc-btn" type="button" @click="backPage">确定</button>
      </div>

      <div class="modify-pwd-suc-server-pic">
        <img src="../../images/service.png" class="server-pic"/>
      </div>
    </div>

    <storeFooter></storeFooter>

  </div>
</template>

<script>
  import hurdle from "../../components/hurdle"
  import storeFooter from "../../components/storeFooter"
  import banner from "../../components/banner"

  export default {
    methods: {
      backPage() {
        this.$router.push("/login");
      }
    },
    components: {
      hurdle,
      storeFooter,
      banner
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .modify-pwd-suc-us-container {
    .wh(100%, auto);
    .modify-pwd-suc-box {
      .wh(100%, auto);
      display: flex;
      justify-content: center;
      position: relative;
      .modify-pwd-suc-con {
        padding-top: 110px;
        padding-bottom: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 464px;
        .suc-pic {
          .wh(72px, 72px)
        }
        .suc-text {
          padding-top: 24px;
          padding-bottom: 66px;
          .size-color(16px, #333333)
        }
        .suc-btn {
          .wh(180px, 48px);
          background: #3CAFFF;
          border-radius: 4px;
          .size-color(16px, #FFFFFF);
          text-align: center;
          line-height: 48px;
          &:hover {
            cursor: pointer;
            background: #39A2ED;
          }
        }
      }
      .modify-pwd-suc-server-pic {
        position: absolute;
        bottom: 20px;
        right: 20px;
        .wh(72px, 72px);
        .server-pic {
          .wh(72px, 72px);
        }
      }
    }
  }
</style>
